<!-- Site Setting Panel -->
<section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<div class="pageheader">
  <h2><i class="fa fa-sitemap"></i> Timeline </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Timeline </li>
    </ol>
  </div>
</div>

<div class="page">
  <div class="row">
    <div class="col-md-12">
      <div class="panel">
        <div class="panel-body"> 
          <!-- START timeline-->
          <ul class="timeline">
            <li>
              <div class="time-show first"> <a href="#" class="btn btn-primary">Today</a> </div>
            </li>
            <li>
              <div class="timeline-badge primary"><i class="fa fa-users"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Bootstrap released</h4>
                  <p><small class="text-muted"><i class="fa fa-time"></i> August 2011</small></p>
                </div>
                <div class="timeline-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
                    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                    Aliquam in felis sit amet augue.</p>
                </div>
              </div>
            </li>
            <li class="timeline-inverted">
              <div class="timeline-badge warning"><i class="fa fa-phone"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Bootstrap 2</h4>
                </div>
                <div class="timeline-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
                    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                    Aliquam in felis sit amet augue.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="timeline-badge danger"><i class="fa fa-video-camera"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Left Event</h4>
                  <p><small class="text-muted"><i class="fa fa-time"></i> 3 years ago</small></p>
                </div>
                <div class="timeline-body">
                  <p>Add more progress events and milestones to the left or right side of the timeline. Each event can be tagged with a date and given a beautiful icon to symbolize it's spectacular meaning.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-show first"> <a href="#" class="btn btn-primary">Yesterday</a> </div>
            </li>
            <li class="timeline-inverted">
              <div class="timeline-badge info"><i class="fa fa-bell"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Right Event</h4>
                </div>
                <div class="timeline-body">
                  <p>Add more progress events and milestones to the left or right side of the timeline. Each event can be tagged with a date and given a beautiful icon to symbolize it's spectacular meaning.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="timeline-badge warning"><i class="fa fa-envelope"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Left Event</h4>
                </div>
                <div class="timeline-body">
                  <p>Add more progress events and milestones to the left or right side of the timeline. Each event can be tagged with a date and given a beautiful icon to symbolize it's spectacular meaning.</p>
                  <hr />
                  <div class="btn-group" dropdown is-open="status.isopen">
                    <button class="btn btn-danger btn-sm dropdown-toggle" type="button"> <i class="fa fa-cog"></i> </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="javascript:;">Action</a></li>
                      <li><a href="javascript:;">Another action</a></li>
                      <li><a href="javascript:;">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="time-show first"> <a href="#" class="btn btn-primary">2014-11-01</a> </div>
            </li>
            <li>
              <div class="timeline-badge primary"><i class="fa fa-arrow-left"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Left Event</h4>
                </div>
                <div class="timeline-body">
                  <p>Add more progress events and milestones to the left or right side of the timeline. Each event can be tagged with a date and given a beautiful icon to symbolize it's spectacular meaning.</p>
                </div>
              </div>
            </li>
            <li class="timeline-inverted">
              <div class="timeline-badge success"><i class="fa fa-thumbs-up"></i></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Oldest event</h4>
                </div>
                <div class="timeline-body">
                  <p>Add more progress events and milestones to the left or right side of the timeline. Each event can be tagged with a date and given a beautiful icon to symbolize it's spectacular meaning.</p>
                </div>
              </div>
            </li>
          </ul>
          <!-- END timeline--> 
        </div>
      </div>
    </div>
  </div>
</div>
